<template>
  <div class="uni-fence">
    <div :id="mapId" class="uni-map"></div>
    <el-button-group class="uni-buttons">
      <el-button size="mini" icon="fa fa-object-ungroup" @click="startDraw">&nbsp;绘制</el-button>
      <el-button size="mini" icon="fa fa-undo" @click="clearDraw">&nbsp;重置</el-button>
    </el-button-group>
  </div>
</template>

<script>
  import * as HMAP from './hmap.manage.js'
  export default {
    name: 'FenceMap',
    data() {
      return {
        mapId: 'mapfance_' + Math.random().toString(36).substr(2),
        mapManager: null,
        floorId: null
      }
    },
    activated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(true)
      }
    },
    deactivated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(false)
      }
    },
    beforeDestroy() {
      if (this.mapManager) {
        this.mapManager.destroy()
        this.mapManager = null
      }
    },
    mounted() {
      this.mapManager = new HMAP.Hmap(this.mapId, {
        mapStorage: false, // 使用地图缓存功能，加快加载速度
        minTiltAngle: 30,
        viewMode: HMAP.ViewMode.Mode_3D, // 初始二维还是三维状态,默认是3D状态
        maxDistance: 2000000,               // 摄像头最远距离
      });
    },
    methods: {
      startDraw() {
        var param = {
          floorId: this.floorId, // 必须：楼层
          objId: 'fenceArea', // 必须：这个模型对应的ID,例如 jflu
          objType: 'area',// 选填：类型区分 默认line, 还有area
          offsetZLock: true, // 是否锁定z坐标
          offsetZ: 20
        }
        this.mapManager.startDraw(param);
      },
      clearDraw() {
        this.mapManager.clearDrawAll();
      },
      getDrawJson() {
        return this.mapManager.getDrawJson();
      },
      setDrawJson(dataStr) {
        if (!dataStr || dataStr == '') {
          return;
        }
        var jsonData = JSON.parse(dataStr);
        this.mapManager.setDrawJson(jsonData);
        this.mapManager.showDraw("fenceArea")
      },
      resize() {
        this.$nextTick(() => {
          if (this.mapManager) {
            this.mapManager.resize()
          }
        })
      },
      _getMapFile(floorData) {
        if (!floorData) {
          return null;
        }
        if (this.type === 'ibeacon') {
          return floorData.ibeaconMap
        } else if (this.type === 'vr') {
          return floorData.vrMap
        }
        return floorData.mapFile
      },
      _getFloorData(floorId) {
        for (var i = 0; i < this.floorList.length; i++) {
          if (this.floorList[i].id === floorId) {
            return this.floorList[i];
          }
        }
        return null;
      },
      showFloor(floorId) {
        if (!this.mapManager) {
          return;
        }
        if (!floorId || floorId === "") {
          this.mapManager.showFloors([]);
          return;
        }
        this.floorId = floorId;
        var floorData = this._getFloorData(floorId);
        this.mapManager.addFloor({
        	floorId: floorId,  				// 必须：楼层Id
        	floorName: floorData.name,					// 必须：楼层名称
        	floorHeight: floorData.height,						// 必须: 楼层展示的z坐标
        	floorMap: this._getMapFile(floorData),							// 必须: 地图文件
        	buildingName: floorData.buildingName,					// 必须: 所属楼宇
        	longitude: floorData.longitude,
        	latitude: floorData.latitude
        })
        this.mapManager.showFloors([floorId]);
        this.mapManager.spreadMap({
        	spreadRatio: 1, 									// 伸缩倍数
        	duration: 0.3,											// 动画秒数
        	rotateAngle: floorData.singleRotateAngle,	// 地图旋转角度
        	tiltAngle: 90,										// 地图到xy面的角度
        	distance: floorData.singleCameraDis,									// 摄像头距离中心点距离
        	targetX: floorData.centerX,									   		// 目标点X轴
        	targetY: floorData.centerY,									   		// 目标点Y轴
        	targetZ: 0                                       // 目标点Z轴
        })
      }
    },
    computed: {
      floorList: {
        get() {
          return this.$store.state.shopdata.floorList
        }
      }
    }
  }
</script>
<style scoped>
  .uni-fence {
    width: 100%;
    height: 500px;
    position: relative;
  }

  .uni-map {
    width: 100%;
    height: 100%;
  }

  .uni-buttons {
    position: absolute;
    top: 20px;
    right: 30px;
  }
</style>
